<template>
  <view>
    <view style="background: white; position: sticky; top: 0rpx">
      <view class="header-box">
        <uni-easyinput
          style="border-radius: 25rpx"
          class="uni-mt-5"
          v-model="searchValue"
          placeholder="请输入订单名称"
        ></uni-easyinput>
        <uni-icons
          styleOther="margin: 10rpx;"
          type="search"
          size="25"
          @click="iconSearch"
      /></view>
    </view>
    <my-tab
      :tabBars="items"
      :current="tabActive"
      @on-current-tab="onCurrentTab"
      @on-loadmore-tab="onLoadmoreTab"
      boxName="order"
      className="centent"
    >
      <x-box className="light">
        <order-box :list="orderList" @handleCodeBtn="handleCodeBtn"></order-box>
        <none-data v-if="orderList.length === 0 && isLoading" />
      </x-box>
    </my-tab>
  </view>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import XBox from "@/components/box/index.vue";
import orderBox from "./components/orderBox.vue";
import MyTab from "@/components/tabs/index.vue";
import { listByStatusOrName } from "@/api/user";

const tabActive = ref(0);
const scrollHeight = ref(0);
const orderList = ref([]);
const isLoading = ref(false);
const items = ref([
  { id: 0, name: "全部" },
  { id: 1, name: "待使用" },
  // {id:2,name:"待提货"},
  { id: 2, name: "已完成" },
]);
let searchValue = ref("");
const handleCodeBtn = (item) => {
  console.log(item.id);
  uni.navigateTo({
    url: `/package_user/pages/user/orderDetails?id=${item.id}`,
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", item);
    },
  });
};
// 获取顶部固定区域高度
function getNodeHeight() {
  uni.getSystemInfo({
    success: (res) => {
      // *****高度宽度的单位都是px
      console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
      scrollHeight.value = res.windowHeight - 150 + "px";
    },
  });
}
function iconSearch() {
  listByStatusOrNameFn(tabActive.value, searchValue.value);
}
// 根据订单状态获取个人订单列表
const listByStatusOrNameFn = (type, orderName) => {
  // return new Promise((resolve, reject) => {
  listByStatusOrName({ type, orderName }).then((res) => {
    isLoading.value = true;

    if (searchValue.value) {
      orderList.value = [];
    }
    res.data.records.forEach((item) => {
      orderList.value.push({
        id: item.id, //	订单id
        title: item.tsoGoodsName, // 订单描述
        orderStatus: item.tsoStatus, // 订单状态
        money: item.tsoTotalPrice, // 订单总权益分
        introduce: item.tsoCreateTime, // 订单创建时间
        tsoGoodsId: item.tsoGoodsId, // 商品id
        tsoCount: item.tsoCount, // 订单数量
      });
    });
  });
  // })
};
const onCurrentTab = (e) => {
  console.log(e);
  searchValue.value = "";
  let vm = {
    0: "全部订单",
    1: "待使用",
    2: "已完成",
  };
  orderList.value = [];
  isLoading.value = false;
  let hashMap = {
    全部订单: {
      directive: () => {
        listByStatusOrNameFn(4);
      },
    },
    待使用: {
      directive: () => {
        listByStatusOrNameFn(1);
      },
    },
    已完成: {
      directive: () => {
        listByStatusOrNameFn(2);
      },
    },
  };
  hashMap[vm[e]].directive();
};
function createNumber(minimum, maximum) {
  var space = maximum - minimum + 1;
  return Math.floor(Math.random() * space + minimum);
}
function onLoadmoreTab() {}
onMounted(() => {
  getNodeHeight();
});
onLoad((option) => {
  let mapData = {
    全部订单: 0,
    待使用: 1,
    // 待提货: 2,
    已完成: 2,
  };
  tabActive.value = mapData[option.type];
  // onCurrentTab(tabActive.value);

  // 根据状态获取订单
  // const stateData = {
  //   全部订单: 4,
  //   待使用: 1,
  //   // 待提货: 2,
  //   已完成: 2,
  // }
  // listByStatusOrNameFn(stateData[option.type])
});
onReachBottom(() => {
  console.log("触发触底");
});
</script>
<style scoped lang="less">
.header-box {
  margin: 0 auto;
  margin-top: 10rpx;
  width: 95vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
